<template>
  <a-card class="system__module">
    <a-card title="菜单列表">
      <template #extra>
        <a-button type="primary" :disabled="!current" @click="openApp(current!)">打开</a-button>
      </template>
      <div class="folder">
        <ul v-if="menuList.length > 0">
          <li
            v-for="(item, key) in menuList"
            :key="key"
            @dblclick="openApp(item)"
            @click="selectItem(item)"
            v-show="!item.hidden"
          >
            <a-card :class="{ active: item.id === current?.id }">
              <div class="image-container text-center">
                <div v-if="MenuTypeEnum.CATEGORY === item.menuType">
                  <AxImage
                    :src="getSystemIcon('system/folder.png')"
                    :width="30"
                    :height="30"
                  ></AxImage>
                </div>
                <div v-else-if="item.menuType === MenuTypeEnum.MENU && item.icon">
                  <AxImage
                    :preview="false"
                    :width="30"
                    :height="30"
                    :src="getSystemIcon(item.icon)"
                  />
                </div>
                <div class="link" v-else-if="item.menuType === MenuTypeEnum.LINK">
                  <img
                    ref="imageRef"
                    :src="getFavicon(item.path)"
                    @error="onError(key)"
                    :draggable="false"
                  />
                </div>
              </div>
              <a-tooltip :title="item.title" placement="bottom">
                <div class="title">
                  {{ item.title }}
                </div>
              </a-tooltip>
            </a-card>
          </li>
        </ul>
        <a-empty v-else description="当前目录下没有功能" />
      </div>
    </a-card>
  </a-card>
</template>

<script setup lang="ts">
import { MenuTypeEnum } from '@/api/modules/system/menu/types';
import type { Routers } from '@/api/modules/system/user/types';
import { getFavicon, getSystemIcon } from '@/api/utils/image';
import logoPng from '@/assets/logo.png';
import { openApp } from '@/views/desktop/apps/data';

const imageRef = ref<HTMLImageElement[]>();
const menuList = ref<Routers[]>([]);
const onError = (key: number) => {
  nextTick(() => {
    if (!imageRef.value) return;
    imageRef.value[key].src = logoPng;
  });
};

const current = ref<Routers>();

const selectItem = (item: Routers) => {
  current.value = item;
};

const props = defineProps<{
  data?: Routers[];
}>();

onMounted(() => {
  if (props.data) {
    menuList.value = props.data;
  }
});
</script>

<style lang="scss" scoped>
@import './style';
</style>
